import React from "react";
import PropTypes from 'prop-types';
import pay from '../img/pay.png';
import qrCode from '../img/qrCode.png';
import alipay from '../img/alipay.png';
import dingding from '../img/dingding.png';
import taobao from '../img/taobao.png';
import weibo from '../img/weibo.png';
import Button from "../../button";
import './midRight.css';


class MidRight extends React.Component {

    scan = () => {
        let scan = document.getElementById('scan');
        let pwd = document.getElementById('pwd');
        scan.style.display = 'block';
        pwd.style.display = 'none';
    }


    pwd = () => {
        let pwd = document.getElementById('pwd');
        let scan = document.getElementById('scan');
        pwd.style.display = 'block';
        scan.style.display = 'none';
    }

    login = () => {
        let username = document.getElementById('username').value;
        let userpwd = document.getElementById('userpwd').value;
        var myReg = /^[^@\/\'\\\"#$%&\^\*]+$/;
        if (username == "" || username == null) {
            alert("用户名输入错误，请重新输入！");
            return false;
        }
        if (userpwd == "" || userpwd == null) {
            alert("密码输入错误，请重新输入！");
            return false;
        }
    }

    render() {
        return (
            <div className='myDiv' style={{float: 'left', border: '1px solid #999', height: '490px', width: '460px'}}>
                <br/>
                <div style={{textAlign: 'center'}}>
                    <button className='button' onClick={this.scan}>扫码登录</button>
                    <button className='button' onClick={this.pwd}>密码登录</button>
                </div>


                <div id={'pwd'} style={{display: 'none', textAlign: 'center'}}>
                    <p style={{marginTop: '20px'}}>密码登录:</p>
                    <input id={'username'} placeholder={'邮箱/会员名/8位ID'}/><br/><br/>
                    <input id={'userpwd'} placeholder={'请输入登录密码'}/><br/><br/>
                    <button className='button' type={'submit'}
                            style={{width: '150px', height: '50px', textAlign: 'center'}} onClick={this.login}>登录
                    </button>
                    <br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span><a href={'#'}>忘记密码</a>&nbsp;&nbsp;<a href={'#'}>忘记会员名</a>&nbsp;&nbsp;<a
                        href={'#'}>免费注册</a></span>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <hr/>
                    <p style={{fontSize: '10px', color: '#999999', textAlign: 'center'}}>其它登录方式：
                        <a href="https://weibo.com/" target="_blank"><img src={weibo}/></a>&nbsp;
                        <a href={'https://oa.dingtalk.com/?spm=a213l2.13146415.4929779444.63.7f155e80k48ev5#/login'}
                           target="_blank"><img src={dingding}/></a>&nbsp;
                        <a href={'https://auth.alipay.com/login/index.htm?goto=https%3A%2F%2Fopenauth.alipay.com%3A443%2Foauth2%2FpublicAppAuthorize.htm%3Fapp_id%3D2017072107837887%26scope%3Dauth_user%26redirect_uri%3Dhttps%253A%252F%252Fpassport.aliyun.com%252Foauth_sign.htm%253Ftype%253Dalipay%2526return_url%253Dhttps%25253A%25252F%25252Faccount.aliyun.com%25253A443%25252Flogin%25252Flogin_aliyun.htm%25253Foauth_callback%25253Dhttps%2525253A%2525252F%2525252Fdeveloper.aliyun.com%2525252Fadc%2525252Fstudent%2525252F%2525253Fspm%2525253D5176.12901015.0.i12901015.6d85525cloTFsy%26state%3Didc_1-vbEUFzrrJWMTmcSN_zf6g'}
                           target="_blank"><img src={alipay}/></a>
                    </p>
                </div>

                <div id={'scan'}>
                    <br/><p style={{textAlign: 'center'}}>扫码后点击“确认授权”，即可完成账号绑定及登录</p>
                    <hr/>
                    <p style={{textAlign: 'center'}}>支持扫码登录的APP:</p>
                    <div style={{textAlign: 'center'}}>
                        <img src={pay}/><br/><br/>
                        <img src={qrCode}/>
                    </div>
                    <p style={{textAlign: 'center'}}><a href={"#"}>免费注册</a></p>
                </div>
            </div>
        );
    }

}

export default MidRight;